<div class="shop" ng-if="zm.sidePanels.shop">
  <div class="shop-title">
    <h2>Shop</h2>
    <button ng-click="zm.closeSidePanels();">Close</button>
  </div>
  <div class="tabs">
    <button ng-click="zm.filterShop('blood');" class="blood {{zm.currentShopFilter == 'blood' ? 'active' : ''}}">Blood</button>
    <button ng-click="zm.filterShop('brains');" class="brains {{zm.currentShopFilter == 'brains' ? 'active' : ''}}">Brains</button>
    <button ng-click="zm.filterShop('bones');" class="bones {{zm.currentShopFilter == 'bones' ? 'active' : ''}}" ng-if="zm.model.constructions.graveyard">Bones</button>
    <button ng-click="zm.filterShop('parts');" class="parts {{zm.currentShopFilter == 'parts' ? 'active' : ''}}" ng-if="zm.model.constructions.monsterFactory">Parts</button>
    <button ng-click="zm.filterShop('completed');" class="bones {{zm.currentShopFilter == 'completed' ? 'active' : ''}}">Complete</button>
  </div>
  <div class="upgrades">
    <div ng-repeat="upgrade in zm.upgrades" class="upgrade {{upgrade.costType}}">
      <h4>{{upgrade.name}}</h4>
      <h4 class="cost">{{zm.upgradePrice(upgrade)|whole}} {{upgrade.costType}}</h4>
      <label>{{zm.upgradeSubtitle(upgrade)}}</label>
      <button ng-click="zm.buyUpgrade(upgrade);" ng-disabled="zm.upgradeTooExpensive(upgrade);">{{zm.upgradeButtonText(upgrade)}}
        <span class="percent" ng-style="{'width':zm.upgradePercent(upgrade) + '%'}"></span>
      </button>
      <button ng-click="upgrade.selected = !upgrade.selected" class="info  {{upgrade.selected ? 'active' : ''}}">i</button>
      <button ng-click="upgrade.auto = !upgrade.auto" class="info {{upgrade.auto ? 'active' : ''}}" ng-if="zm.currentShopFilter != 'completed' && zm.model.autoUpgrades">{{upgrade.auto ? 'On' : 'Auto'}}</button>
      <button ng-click="zm.destroyUpgrade(upgrade)" ng-if="zm.currentShopFilter == 'completed' && zm.currentRank(upgrade) > 1">Destroy</button>
      <p ng-show="upgrade.selected">{{upgrade.description}}</p>
      <p ng-show="upgrade.selected">Current Rank: {{zm.currentRank(upgrade)}}{{upgrade.cap != 0 ? ' / ' + upgrade.cap : ''}} - {{zm.upgradeStatInfo(upgrade)}}</p>
    </div>
  </div>
</div>